<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>会员列表</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="./css/menber.css">
    <style type="text/css">
        .layui-table-cell {
            height: 50px;
            line-height: 50px;
        }

        .layui-table-page {
            background: white;
        }
        #uniocn{
           box-sizing: border-box;
            padding: 15px 100px;
        }
    </style>
</head>

<body>
<div id="uniocn" class="layui-layout layui-layout-admin">
    <div class="finance-title" style="background: #fff;padding-bottom: 0;border-bottom: 1px solid #1AB394">
        <button class="layui-btn layui-btn-ms">会员列表</button>
    </div>
    <div class="manageb">
        <form class="layui-form">
            <div class="layui-input-inline" style="width: 100px;font-size: 14px;">
                <select name="interest" lay-filter="aihao">
                    <option value="" selected=""></option>
                    <option value="0">手机号</option>
                    <option value="1">会员名称</option>
                </select>
            </div>

            <div class="layui-input-inline">
                <input type="text" name="keyword" placeholder="请输入搜索内容" class="layui-input" style="font-size: 14px;">
            </div>

            <div class="layui-input-inline">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">搜索</button>
            </div>
        </form>
    </div>

    <div class="table">
        <table class="layui-hide" id="demo" lay-filter="demo"></table>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-danger layui-btn-sm recharge" lay-event="delect">删除</a>
        </script>
    </div>
</div>
</body>
<script src="layui/layui.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="./js/vue2.5.16.js"></script>
<script src="./js/public.js"></script>
<script src="js/data.js"></script>
<script>
    new Vue({
        el: "#uniocn",
        data: {
            header: data.header,
            side: data.side,
        }
    })

    layui.use(['layer', 'table', 'form'], function () {
        layer = layui.layer,
            table = layui.table,
            form = layui.form;

        //搜索
        form.on('submit(formDemo)', function (data) {
            console.log(JSON.stringify(data.field));
            return false;
        });

        table.render({
            elem: '#demo',
            cols: [
                [ //标题栏
                    {
                        field: 'headimg',
                        title: '会员头像',
                        align: 'center',
                    },
                    {
                        field: 'nickname',
                        title: '会员昵称',
                        align: 'center',
                    }, {
                    field: 'grade',
                    title: '会员等级',
                    align: 'center',
                }, {
                    field: 'phone',
                    title: '会员手机号',
                    align: 'center',
                }, {
                    field: 'volume',
                    title: '成交量',
                    align: 'center',
                }, {
                    field: 'turnover',
                    title: '成交额',
                    align: 'center',
                }, {
                    fixed: 'right',
                    title: '操作',
                    align: 'center',
                    width: 400,
                    toolbar: '#barDemo'
                }
                ]
            ],
            data: [{
                "headimg": "<img style='width: 40px;height: 40px;border-radius: 50%;' src='images/userImg.png'/>",
                "nickname": "测试昵称",
                "grade": "普通会员",
                "phone": "13000000000",
                "volume": "0",
                "turnover": "0.00"
            }, {
                "headimg": "<img style='width: 40px;height: 40px;border-radius: 50%;' src='images/userImg.png'/>",
                "nickname": "测试昵称",
                "grade": "普通会员",
                "phone": "13000000000",
                "volume": "0",
                "turnover": "0.00"
            }, {
                "headimg": "<img style='width: 40px;height: 40px;border-radius: 50%;' src='images/userImg.png'/>",
                "nickname": "测试昵称",
                "grade": "普通会员",
                "phone": "13000000000",
                "volume": "0",
                "turnover": "0.00"
            }],
            page: true //是否显示分页
            //,limit: 5 //每页默认显示的数量
        });

        //监听工具条
        table.on('tool(demo)', function (obj) {
            var data = obj.data;
            if (obj.event === 'delect') { //删除
                layer.confirm('确认删除吗？', function (index) {
                    obj.del();
                    layer.close(index);
                });
            }
        })
    });
</script>

</html>